<%@ page language="java" contentType="text/html; charset=utf-8"
	pageEncoding="utf-8" isELIgnored="false"%>
<%@ include file="/WEB-INF/views/shared/taglib.jsp"%>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<%@ include file="/WEB-INF/views/shared/master/webkitMeta.jsp"%>
<meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no">
<title>${title}</title>

<link href="${js_cdn_prefix}/plugins/limitless/default/css/icons/icomoon/styles.css" rel="stylesheet" type="text/css" />
<link href="${js_cdn_prefix}/plugins/limitless/default/css/bootstrap/bootstrap.css" rel="stylesheet" type="text/css" />
<link href="${js_cdn_prefix}/plugins/limitless/default/css/core.css" rel="stylesheet" type="text/css" />
<link href="${js_cdn_prefix}/plugins/limitless/default/css/components.css" rel="stylesheet" type="text/css"/>

<style type="text/css">
	.bg-pink-400 {background-color: #EC407A;border-color: #EC407A;color: #fff;}
	.bg-slate {background-color: #607D8B;border-color: #607D8B;color: #fff;}
	.border-info {border-color: #00BCD4;}
	.text-info{color: #00BCD4 !important;}
	.border-warning-400{border-color: #FF7043;}
	.text-warning-400{color: #FF7043 !important;}
	.text-indigo{color: #3F51B5 !important;}
	.border-indigo {border-color: #3F51B5;}
	.text-pink-300 {color: #F06292 !important;}
	.border-pink-300 {border-color: #F06292;}
	.text-indigo {color: #3F51B5 !important;}
	.border-indigo {border-color: #3F51B5;}
	.form-group{margin-bottom: 15px;}
	.content:first-child{padding-top: 10px;}
	.content-group-lg{margin-bottom: 15px !important;}
	.text-danger, .text-danger:hover, .text-danger:focus {color: #F44336 !important;}
	
	
</style>
<style type="text/css">
	<c:if test="${imgNum==null}">
		<c:set value="${tfn:random(1,33)}" var="imgNum"/>
	</c:if>

	@media (min-width: 960px) {
		.panel-cus {margin-bottom: 20px;background-color: #fff;border: 1px solid transparent;border-radius: 3px;-webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05);box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05);}
		.panel-body-cus {padding: 20px;}
		.login-cover-cus{background-image: url("${js_cdn_prefix}/images/loginback/${imgNum}.jpg") !important;opacity:0.92;background-size: cover;}
		.login-container .page-container .login-form{width:340px !important;}	
    }
</style>

<%@ include file="/WEB-INF/views/shared/scripts/jquery.jsp"%>
<script src="${js_cdn_prefix}/plugins/tools/cookie/jquery.cookies.js" type="text/javascript"></script>
<%@ include file="/WEB-INF/views/shared/base/scripts/limitless/default/notifications.jsp"%>
<script type="text/javascript">
	$(function(){
		$("#account").on("blur",function(){
			checkAccount();
		})
		$("#name").on("blur",function(){
			checkName();
		})
		$("#password").on("blur",function(){
			checkPassword();
		})
	});
	
	function checkAccount(){
		var account=$("#account").val();
		if($.isNull(account)){
			$.notify("账号不能为空");
			return false;
		}
		
		var url=$.getVirtualPath()+"/api/v1/staff/checkAccount";
		var result=$.getJson(url,"account="+account);
		console.log(result);
		if(result.status!=200){
			$.notify(result.message);
			return false;
		} 
		return true;
	}
	
	function checkName(){
		var name=$("#name").val();
		if($.isNull(name)){
			$.notify("姓名不能为空");
			return false;
		}
		return true;
	}
	
	function checkPassword(){
		var password=$("#password").val();
		if($.isNull(password)){
			$.notify("密码不能为空");
			return false;
		}
		return true;
	}
	
	function onRegister(){
		if(!checkAccount()||!checkName()||!checkPassword()){
			return false;
		}
		
	}
</script>
</head>
<body style="margin: 0px; padding: 0px;" class='login-container login-cover-cus'>
	<div class="page-container" style="padding-top: 20px;">
		<div class="page-content">
			<div class="content-wrapper">
				<div class="content">
					<form action="<c:url value='/admin/home/register' />" method="post">
						<div class="login-form panel-cus panel-body-cus">
							<div class="text-center">
								<div class="icon-object border-success text-success"><i class="icon-plus3"></i></div>
								<h5 class="content-group">创建账户<small class="display-block"></small></h5>
							</div>
							<div class="form-group has-feedback has-feedback-left">
								<input type="text" id="account" name="account" class="form-control" placeholder="账户名">
								<div class="form-control-feedback">
									<i class="icon-user text-muted"></i>
								</div>
							</div>
							<div class="form-group has-feedback has-feedback-left">
								<input type="text" id="name" name="name" class="form-control" placeholder="真实姓名">
								<div class="form-control-feedback">
									<i class="icon-user-check text-muted"></i>
								</div>
							</div>
							<div class="form-group has-feedback has-feedback-left">
								<input type="text" id="password" name="password" class="form-control" placeholder="密码">
								<div class="form-control-feedback">
									<i class="icon-user-lock text-muted"></i>
								</div>
							</div>
							<div class="form-group">
								<button type="submit" onclick="return onRegister()" class="btn bg-pink-400 btn-block btn-lg">注册<i class="icon-circle-right2 position-right"></i></button>
							</div>
							<div class="content-divider text-muted form-group">
								<span>已有账号</span>
							</div>
							<a href="<c:url value='/admin/home/login' />" class="btn bg-slate btn-block btn-lg content-group">登陆</a>
						</div>
					</form>
				</div>
			</div>
		</div>
	</div>
	<c:if test="${resultKey!=null}">
		<div style="display: none;" class="actionresult">
			<input type="hidden" id="actionresult_result" value="${resultKey.resultType}" />
			<input type="hidden" id="actionresult_message" value="${resultKey.message}" />
		</div>
		<script type="text/javascript">
			$(function(){
				if($(".actionresult").length>0){
					var resultType=$("#actionresult_result").val();
					var message=$("#actionresult_message").val();
					
					$.notify(message,resultType);
					
					if(resultType!="success"){
						$.cookie("thinku",null);
						$.cookie("thinkp",null);
						$("#login_username").val("");
						$("#login_password").val("");
					}
				}
			});
			
		</script>
	</c:if>
</body>
</html>